let main = document.querySelector('.main-c')
console.log(main);
let uid = localStorage.getItem('uid')
console.log(uid);
dellist()
countnum()



function dellist() {
    axios
        .get(cartListAPI, {
            params: {
                id: uid,
            },
        })
        .then((res) => {
            console.log(res);


            let arr = res.data.data.map(
                (v) => `
        <div class="main-c-c">
            <p><input id="ipt1" type="checkbox" /></p>
            <img src="${v.pimg}" alt="" />
            <p>${v.pname}</p>
            <p id='p'>${v.pprice}</p>
            <p><span id="btn1" data-pid='${v.pid}'>-</span>
            <input id="ipt2" type="text" value='${v.pnum}' />
            <span id="btn2" data-pid='${v.pid}'>+</span>
            </p>
            <p id='teshu'>${v.pprice*v.pnum+'.00元'}</p>
            <button id='btn' data-pid='${v.pid}'>x</button>
        </div>
                    `
            );

            // 一共几件商品
            let total = 0
            let arrs = res.data.data
            arrs.forEach(v => {

                total += parseInt(v.pnum)
            })
            console.log(total);
            localStorage.setItem('total', total)
            document.querySelector('.web a').innerHTML = total



            main.innerHTML = arr.join('')



            //   删除
            let btns = document.querySelectorAll('#btn')
            btns.forEach((btn) => {
                btn.onclick = function() {
                    let uid = localStorage.getItem("uid");
                    let pid = btn.getAttribute("data-pid");
                    console.log(uid, pid);


                    axios
                        .get(cartDeleteAPI, {
                            params: {
                                uid,
                                pid,
                            },
                        })
                        .then((res) => {

                            let total = localStorage.getItem('total')
                            total = total - parseInt(btn.parentNode.querySelector('#ipt2').value)
                            document.querySelector('.web a').innerHTML = total
                            localStorage.setItem('total', total)
                                // dellist()


                            btn.parentNode.remove();

                            let checkall = document.querySelector('#ipt0')
                            let checkones = document.querySelectorAll('#ipt1')
                            console.log(checkones.length);
                            if (checkones.length == 0) {
                                checkall.checked = false
                            }

                            checkones.forEach((checkone) => {
                                if (checkone.checked == true) {
                                    checkall.checked = true
                                }

                            })

                            countnum()
                        });
                };
            });




            // 减数量
            let delbtns = document.querySelectorAll('#btn1')
            console.log(delbtns);
            delbtns.forEach((btn) => {
                btn.onclick = async() => {
                    let pid = btn.getAttribute("data-pid");
                    let uid = localStorage.getItem("uid");
                    let pnumipt = btn.parentNode.querySelector("#ipt2");
                    let pnum = parseInt(pnumipt.value) - 1;
                    if (pnum == 0) {
                        return;
                    }

                    let total = localStorage.getItem('total')
                    total--
                    document.querySelector('.web a').innerHTML = total
                    localStorage.setItem('total', total)

                    let params = {
                        pid,
                        uid,
                        pnum,
                    };
                    try {
                        let res = await axios.get(cartUpdateNumAPI, {
                            params
                        });
                        pnumipt.value = pnum;

                        xiaoji()
                        countnum()
                    } catch (error) {}
                }
            });




            // 加数量
            let addbtns = document.querySelectorAll('#btn2')
            console.log(addbtns);
            addbtns.forEach((btn) => {
                btn.onclick = async() => {
                    let pid = btn.getAttribute("data-pid");
                    let uid = localStorage.getItem("uid");
                    let pnumipt = btn.parentNode.querySelector("#ipt2");
                    let pnum = parseInt(pnumipt.value) + 1;
                    console.log(pid, uid, pnumipt, pnum);

                    let total = localStorage.getItem('total')
                    total++
                    document.querySelector('.web a').innerHTML = total
                    localStorage.setItem('total', total)


                    let params = {
                        pid,
                        uid,
                        pnum,
                    }
                    try {
                        let res = await axios.get(cartUpdateNumAPI, { params });
                        pnumipt.value = pnum;

                        xiaoji()
                        countnum()
                    } catch (error) {

                    }
                }
            });




            // 全选
            let checkall = document.querySelector('#ipt0')
            let checkones = document.querySelectorAll('#ipt1')
            let bbtn = document.querySelector('.web button')

            checkall.onchange = function() {
                //获取改变后的状态  true  false
                console.log(this.checked);

                // 根据全选按钮的状态 修改 单选按钮的状态

                checkones.forEach((checkone) =>
                    checkone.checked = this.checked
                );
                countnum()
            };



            // 单选
            checkones.forEach((checkone) => {

                checkone.onchange = function() {
                    // 判断 所有的 singleSels 状态
                    // 全部都是选中，all才是选中
                    // 反之 all是非选中
                    //singleSels 伪数组
                    // let arr = Array.from(singleSels)
                    if (checkone.checked == true) {
                        checkall.checked = checkone.checked
                    }
                    let arr = [...checkones];
                    console.log(arr);
                    console.log(checkones);
                    let allFlag = arr.every((ipt) => ipt.checked === true);
                    checkall.checked = allFlag;
                    countnum()
                }
            })
        });
}



// 封装一个计算总价和商品数量的函数
function countnum() {
    let checkones = document.querySelectorAll('#ipt1')
    let checkoneArr = [...checkones]
        //获取被选中的框
    let checkoneedArr = checkoneArr.filter((v) => v.checked == true)
    console.log(checkoneedArr);
    // 遍历所有选中框  找到父元素里面的 pnum-ipt  .value 累加
    let sum = 0;
    let price = 0;

    checkoneedArr.forEach((v) => {
        console.log(v.parentNode.parentNode.querySelector("#ipt2"));
        sum += parseInt(v.parentNode.parentNode.querySelector("#ipt2").value);
        price +=
            parseInt(v.parentNode.parentNode.querySelector("#ipt2").value) *
            parseFloat(v.parentNode.parentNode.querySelector("#p").innerText);
    });
    console.log(sum);
    console.log(price);
    let a1 = document.querySelector('#a')
    a1.innerHTML = sum

    let a2 = document.querySelector('.web h2 a')
    console.log(a2);
    a2.innerHTML = price


    // 选中按钮变色
    let bbtn = document.querySelector('.web button')
    if (sum > 0) {
        bbtn.style.backgroundColor = "red"

    } else {
        bbtn.style.backgroundColor = ""
    }
}



// 小计
function xiaoji() {
    let lis = document.querySelectorAll('.main-c-c')
    console.log(lis);
    lis.forEach((v, i) => {
        v.querySelector('#teshu').innerText = parseInt(v.querySelector('#p').innerText) * parseInt(v.querySelector('#ipt2').value) + '.00元'
    })
}